<template>
  <el-card style="margin-bottom: 20px">
    <template #header>
      <div class="card-header">
        <span>设置账号默认签名</span>
      </div>
    </template>
    <div>
      <el-form :model="accountDefaultSignature" :inline="true" label-width="auto">
        <el-form-item label="账号" prop="accountId">
          <el-select v-model="accountDefaultSignature.accountId" @change="handleAccountChange">
            <el-option
              v-for="item in accountSignatureList"
              :key="item.accountId"
              :label="item.account.showName"
              :value="item.accountId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="新邮件" prop="newMailSignatureId">
          <el-select
            v-model="accountDefaultSignature.newMailSignatureId"
            @change="handleNewSignatureChange"
          >
            <el-option :key="0" label="无" :value="0" />
            <el-option
              v-for="item in signatureList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="回复/转发" prop="replyMailSignatureId">
          <el-select
            v-model="accountDefaultSignature.replyMailSignatureId"
            @change="handleReplySignatureChange"
          >
            <el-option :key="0" label="无" :value="0" />
            <el-option
              v-for="item in signatureList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="handleSignatureAccountSave"> 保存 </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
  <el-card style="height: 100%">
    <template #header>
      <div class="card-header">
        <span>签名管理</span>
      </div>
    </template>
    <el-row :gutter="20">
      <el-col :span="3" :xs="24">
        <Table
          :data="signatureList"
          :columns="signatureColumns"
          :expand-on-click-node="false"
          highlight-current
          @row-click="handleSignatureClick"
        >
          <template #menu="{ row }">
            <context-menu-item label="重命名" @click="handleMenuRename(row)" />
            <context-menu-item label="删除" @click="handleMenuDelete(row)" />
          </template>
        </Table>
      </el-col>
      <el-col :span="21" :xs="24">
        <div style="display: flex; margin: 5px 0">
          <el-button type="primary" plain @click="handleSignatureCreate">
            <Icon icon="ep:plus" /> 新增
          </el-button>
          <el-button type="primary" plain @click="handleSignatureSave"> 保存 </el-button>
        </div>
        <div style="flex: 1">
          <Editor :height="editorHeight" v-model="currentContent" @keydown="handleKeyDown" />
        </div>
      </el-col>
    </el-row>
  </el-card>
  <MailSignatureNameEdit ref="signatureNameEditRef" @success="handleSignatureNameEditSuccess" />
</template>
<script setup name="MailSignature" lang="ts">
import * as signatureApi from '@/api/mailbox/mailSignature'
import { Editor } from '@/components/Editor'
import MailSignatureNameEdit from '@/views/mailbox/mailSignature/MailSignatureNameEdit.vue'
const message = useMessage() // 消息弹窗
const signatureList = ref()
const accountSignatureList = ref()
const currentContent = ref()
const signatureNameEditRef = ref()
const currentSignature = ref()
const signatureColumns = [{ label: '签名', prop: 'name' }]
const accountDefaultSignature = reactive({
  accountId: undefined,
  newMailSignatureId: 0,
  replyMailSignatureId: 0
})

const editorHeight = ref('calc(100vh - 450px)')

onMounted(async () => {
  signatureList.value = await signatureApi.list()

  accountSignatureList.value = await signatureApi.listAccountSignature()
  if (accountSignatureList.value.length >= 1) {
    accountDefaultSignature.accountId = accountSignatureList.value[0].accountId

    accountDefaultSignature.newMailSignatureId =
      accountSignatureList.value[0].newMailSignatureId ?? 0

    accountDefaultSignature.replyMailSignatureId =
      accountSignatureList.value[0].replyMailSignatureId ?? 0
  }
})

const handleSignatureClick = (row) => {
  currentSignature.value = row
  currentContent.value = row.content
}

const handleSignatureCreate = () => {
  signatureNameEditRef.value.open({ id: 0, name: '' })
}

const handleSignatureNameEditSuccess = async () => {
  signatureList.value = await signatureApi.list()
}

const handleSignatureSave = async () => {
  if (currentSignature.value == undefined) {
    message.error('请先选择签名')
    return
  }
  await signatureApi.updateSignature({
    id: currentSignature.value.id,
    name: currentSignature.value.name,
    content: currentContent.value
  })
  signatureList.value = await signatureApi.list()
  message.success('保存成功')
}

const handleMenuRename = (row) => {
  signatureNameEditRef.value.open({ id: row.id, name: row.name })
}

const handleMenuDelete = async (row) => {
  const id = row.id
  await message.confirm("确认要删除'" + row.name + "'吗?", '确认')
  await signatureApi.deletedSignature(row.id)
  message.success('删除成功')
  signatureList.value = await signatureApi.list()

  accountSignatureList.value.forEach((item) => {
    if (item.newMailSignatureId == id) item.newMailSignatureId = 0
    if (item.replyMailSignatureId == id) item.replyMailSignatureId = 0
  })
  if (accountDefaultSignature.newMailSignatureId == id)
    accountDefaultSignature.newMailSignatureId = 0
  if (accountDefaultSignature.replyMailSignatureId == id)
    accountDefaultSignature.replyMailSignatureId = 0
}

const handleSignatureAccountSave = async () => {
  await signatureApi.saveAccountSignature(accountSignatureList.value)
  message.success('保存成功')
}

const handleAccountChange = (accountId) => {
  accountSignatureList.value.forEach((item) => {
    if (item.accountId == accountId) {
      accountDefaultSignature.newMailSignatureId = item.newMailSignatureId ?? 0
      accountDefaultSignature.replyMailSignatureId = item.replyMailSignatureId ?? 0
    }
  })
}

const handleNewSignatureChange = (signatureId) => {
  accountSignatureList.value.forEach((item) => {
    if (item.accountId == accountDefaultSignature.accountId) {
      item.newMailSignatureId = signatureId
    }
  })
}

const handleReplySignatureChange = (signatureId) => {
  accountSignatureList.value.forEach((item) => {
    if (item.accountId == accountDefaultSignature.accountId) {
      item.replyMailSignatureId = signatureId
    }
  })
}

const handleKeyDown = async (event) => {
  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
    // 阻止默认的保存对话框
    event.preventDefault()

    handleSignatureSave()
  }
}
</script>
